import { Table, Button, Select, InputNumber } from 'antd';
import { useState } from 'react';
import './Shopping.scss';
const Shopping = () => {
  const [list, setList] = useState([
    {
      name: '烤鱿鱼串',
      id: 1,
      image: 'https://i2.wp.com/telegra.ph/file/d25fc3065e4a6a043b899.jpg',
      price: 10,
      count: 2,
      tolPrice: 0,
      key: 1,
    },
    {
      name: '烤羊肉串',
      id: 2,
      image: 'https://i2.wp.com/telegra.ph/file/8022385c2562b2aef701e.jpg',
      price: 15,
      count: 1,
      tolPrice: 0,
      key: 2,
    },
    {
      name: '烤韭菜',
      id: 3,
      image: 'https://i2.wp.com/telegra.ph/file/a7089d6bd6d734db9ce41.jpg',
      price: 3,
      count: 1,
      tolPrice: 0,
      key: 3,
    },
    {
      name: '烤五花肉串',
      id: 4,
      image: 'https://i1.wp.com/telegra.ph/file/317429a98c997d7ae523c.jpg',
      price: 13,
      count: 1,
      tolPrice: 0,
      key: 4,
    },
  ]);
  const [softDrink] = useState([
    {
      value: '果汁橙',
      label: '果汁橙',
    },
    {
      value: '芬达',
      label: '芬达',
    },
    {
      value: '雪碧',
      label: '雪碧',
    },
    {
      value: '可乐',
      label: '可乐',
    },
  ]);
  const columns = [
    {
      title: '口味必选',
      dataIndex: 'image',
      align: 'center',
      render: (img, data) => (
        <div
          style={{
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'space-evenly',
          }}
        >
          <img className="images" src={img} alt="" />
          <span>{data.name}</span>
        </div>
      ),
    },
    {
      title: '免费配选畅饮/杯',
      dataIndex: 'age',
      align: 'center',
      render: () => (
        <Select
          defaultValue="苹果橙"
          style={{ width: 120 }}
          onChange={handleChange}
          options={softDrink}
        />
      ),
    },
    {
      title: '价格',
      dataIndex: 'tolPrice',
      align: 'center',
      render: (num, data) => <>￥{(data.price * data.count).toFixed(2)}</>,
    },
    {
      title: '份数',
      dataIndex: 'count',
      align: 'center',
      render: (count, data) => (
        <InputNumber
          min={1}
          max={99}
          defaultValue={count}
          onChange={onChange(data)}
        />
      ),
    },
    {
      title: '操作',
      dataIndex: 'action',
      align: 'center',
      render: (_, data) => (
        <Button onClick={() => onDelete(data)} danger>
          移除
        </Button>
      ),
    },
  ];
  // selet选中触发
  const handleChange = (value) => {
    console.log(`selected ${value}`);
  };
  // 复选框选中
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const onSelectChange = (newSelectedRowKeys) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  // 删除列表数据
  const onDelete = (data) => {
    setList(() => list.filter((item) => item.key !== data.key));
  };
  // 份数
  // index 当前行的数据
  // value 当前行的count值
  const onChange = (index) => {
    return (count) => {
      list.forEach((item) => {
        if (item.id === index.id) {
          item.count = count;
        }
      });
      setList([...list]);
    };
  };
  return (
    <div className="shop-container">
      <Table
        bordered
        rowSelection={rowSelection}
        columns={columns}
        dataSource={list}
      />
    </div>
  );
};
export default Shopping;
